<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div>
    {{info}}
    <!--v-model=“变量”让控件的值和变量进行双向绑定变量
    的值改变会影响页面,页面的改变也会影响变量-->
    <input type="text" :value="info">
    <hr>
    <input type="text" v-model="user.username" placeholder="用户名"><br>
    <input type="text" v-model="user.password" placeholder="密码">
</div>
<script>
    let v= new Vue({
        el:"body>div",
        data:{
            info:"双向绑定测试",
            user:{
                username:"",
                password:""
            }
        }
    })
</script>
</body>
</html>